<template>
    <div style="width: 100%;">
        <div style="margin-bottom: 10px;"><span style="color:red;">*</span>{{ title }}</div>
        <div v-if="uploadType === 'drag'">
            <el-upload class="upload-demo" drag
            :headers="headers"
            v-if="dialogImageUrl.length ==0"
            :on-success="onSuccess"
            :action="`${$apiHost}` + actionUrl"
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <div v-else style="position: relative;" class="dragBg">
                 <div class="dragBox" @click="deleteImg">
                    <el-icon  name="delete" style="color:white;font-size: 30px;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);z-index: 10000;" ></el-icon>
                 </div>
                 <img  :src="`${$imgHost}${dialogImageUrl[0]}`" style="width: 360px;height: 180px;"/>
            </div>
        </div>
        <div v-else-if="uploadType === 'default'">
            <el-upload  :action="`${$apiHost}` + actionUrl"
            :limit="limit"
            :headers="headers"
            :on-exceed="exceedChange"
            :multiple="multipleStatus"
            :class="{hide:isHide}"
             list-type="picture-card"
             :on-success="onSuccess"
             :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>
        <div v-else-if="uploadType === 'copy'">
        </div>
    </div>
</template>
<script>
import store from "../store";

/**
 * upload 文件上传

 * @property {String}	title		组件标题
 * @property {String}	uploadType  上传类型 //  拖拽/复制上传/普通上传
 * @property {Boolean}  multipleStatus  多选  //复制上传时  不可多选
 * @property {String}   fileType    文件类型
 */
export default {
    props: {
        title: {
            type: String,
            default: '文件上传'
        },
        uploadType: {
            type: String,
            default: 'default'
        },
        fileType: {
            type: String,
            default: () => { }
        },
        clearImgUrl:{
            type:Boolean,
            default:false
        },
        limit:{
          type:[Number,String],
          default:1
        },
        multipleStatus: {
            type: Boolean,
            default: false
        }
    },
    mounted() {

    },
    computed: {
        headers() {
            return {
                token:store.state.token
            };
        },
    },
    watch:{
        clearImgUrl:{
            handler(newVal){
                if(newVal){
                    this.dialogImageUrl = [];
                }
            },
            deep:true,
            immediate:true
        },
        'dialogImageUrl':{
            handler(newVal){
               this.dialogImageUrl = newVal;
                if(this.dialogImageUrl.length >= this.limit){
                    this.isHide = true
                }

            },
            deep:true,
            immediate:true
        }
    },
    data() {
        return {
            dialogImageUrl: [],
            actionUrl:'/common/fileImgUrl',
            isHide:false

        }
    },
    methods: {
        exceedChange(){
            this.$message.error(`图片只能上${this.limit}张!`);
        },
        deleteImg(){
            this.dialogImageUrl = [];
            this.$emit('imgUrl',this.dialogImageUrl);
        },
        onSuccess(e){
            this.dialogImageUrl.push(e.result[0]);
            this.$emit('imgUrl',this.dialogImageUrl);
        },
      handleRemove(file,fileList) {
        if(fileList.length >= this.limit){
            this.isHide = true;
        }else{
            this.isHide = false;
        }
      },
    }
}

</script>
<style lang="less" scoped>
.dragBox{
    position: absolute;
    display: none;
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5 );
    top:0;
    z-index: 100;
    left:0;
}
.dragBg:hover .dragBox{
display: block;
cursor: pointer;
}
.hide
  /deep/ .el-upload--picture-card {
    display: none !important
  }

</style>
